<script setup lang="ts">
/**
 * @description 在 ListCell 中使用的输入框组件。
 */
interface ListInputProps {
  modelValue: string
  type?: string
  placeholder: string
}

const props = defineProps<ListInputProps>()

const emit = defineEmits(['update:modelValue', 'blur'])

function handleInput(e: Event) {
  emit('update:modelValue', (e.target as HTMLInputElement).value)
}

function handleBlur(e: Event) {
  emit('blur', e)
}
</script>

<template>
  <input
    class="h-116rpx text-secondary text-28rpx leading-28rpx text-right"
    :value="props.modelValue"
    :type="props.type ? props.type as any : 'text'"
    :placeholder="props.placeholder"
    placeholder-style="color: #999999"
    @input="(handleInput as any)"
    @blur="(handleBlur as any)"
  >
</template>
